<script setup lang="ts">
import { nextTick, ref } from 'vue';
import useAutoScrollY from '@/hooks/common/autoScrollY';
import { recordselectTop } from '../../../../service/api/modules/agv/menu';
const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    ellipsis: true
  },
  {
    key: 'eqpNo',
    dataIndex: 'eqpNo',
    width: 120,
    title: '机台号',
    align: 'center',
    ellipsis: true
  },
  {
    key: 'prodNo',
    dataIndex: 'prodNo',
    title: '物料批次',
    align: 'center',
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '时间日期',
    align: 'center',
    ellipsis: true
  },
  {
    width: 120,
    key: 'createBy',
    dataIndex: 'createBy',
    title: '操作人',
    align: 'center',
    ellipsis: true
  }
]);
const tableData = ref([]);
function isTableDataTwo() {
  recordselectTop('').then(({ data, error }) => {
    if (!error) {
      data.forEach((item, index) => {
        item.index = index + 1;
      });
      tableData.value = data;
    }
  });
}
const loading = ref(false);
const tableRef = ref(null);

const { scrollStart } = useAutoScrollY('.botton-table');
isTableDataTwo();
nextTick(() => {
  scrollStart();
});
</script>

<template>
  <div class="h-full w-full flex-col-stretch gap-5px">
    <div class="title font-size-16px font-bold">机台叫料记录列表:</div>
    <ATable
      ref="tableRef"
      :columns="columnChecks"
      :data-source="tableData"
      bordered
      size="small"
      :loading="loading"
      row-key="id"
      :pagination="false"
      :scroll="{ x: 'auto', y: 'auto' }"
      class="botton-table"
    />
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: #646cff;
}
.botton-table {
  height: calc(100% - 28px);
}
</style>
